{% block sw_product_detail_cross_selling %}
<div v-if="isLoading">
    <sw-skeleton />
    <sw-skeleton />
</div>

<div
    v-else
    class="sw-product-detail-cross-selling"
>
    {% block sw_product_detail_cross_selling_items_wrapper %}
    <template v-if="showCrossSellingCard">
        {% block sw_product_detail_cross_selling_restore_inheritance %}
        <mt-button
            v-if="isChild"
            class="sw-product-detail-cross-selling__restore-inheritance-btn"
            :disabled="!acl.can('product.editor')"
            variant="secondary"
            @click="onShowRestoreInheritanceModal"
        >
            <mt-icon
                key="inherit-icon"
                name="regular-link-horizontal"
                size="16px"
            />
            {{ $tc('sw-product.crossselling.buttonRestoreCrossSellingInheritance') }}
        </mt-button>
        {% endblock %}

        {% block sw_product_detail_cross_selling_items %}
        <ul class="sw-product-detail-cross-selling__cross-selling-list">
            <sw-product-cross-selling-form
                v-for="item in product.crossSellings"
                :key="item.id"
                :cross-selling="item"
                :allow-edit="acl.can('product.editor')"
            />
        </ul>
        {% endblock %}

        {% block sw_product_detail_cross_selling_add %}
        <mt-button
            v-tooltip="{
                message: onAddCrossSellingTooltipMessage,
                disabled: acl.can('product.editor') && isSystemDefaultLanguage,
                showOnDisabledElements: true
            }"
            class="sw-product-detail-cross-selling__add-btn"
            ghost
            :disabled="!acl.can('product.editor') || !isSystemDefaultLanguage"
            variant="secondary"
            @click="onAddCrossSelling"
        >
            {{ $tc('sw-product.crossselling.buttonAddCrossSelling') }}
        </mt-button>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_product_detail_cross_selling_empty_state_card %}
    <mt-card
        v-else
        position-identifier="sw-product-detail-cross-selling-empty-state"
    >
        {% block sw_product_detail_cross_selling_empty_state %}
        <sw-empty-state
            :title="$tc('sw-product.crossselling.cardTitleCrossSelling')"
            :absolute="false"
            empty-module
        >
            {% block sw_product_detail_cross_selling_empty_state_icon %}
            <template #icon>
                <img
                    :src="assetFilter('/administration/administration/static/img/empty-states/products-empty-state.svg')"
                    :alt="$tc('sw-product.crossselling.cardTitleCrossSelling')"
                >
            </template>
            {% endblock %}

            <template #default>
                {% block sw_product_detail_cross_selling_empty_state_content %}
                <template v-if="isChild">
                    {% block sw_product_detail_cross_selling_empty_state_content_child %}
                    <template v-if="isInherited">
                        {% block sw_product_detail_cross_selling_empty_state_content_child_inherited %}
                        <p>{{ $tc('sw-product.crossselling.inheritedEmptyStateDescription') }}</p>
                        {% endblock %}

                        {% block sw_product_detail_cross_selling_empty_state_content_child_inherited_link %}
                        <router-link
                            v-if="isChild && isInherited"
                            :to="{ name: 'sw.product.detail.crossSelling', params: { id: product.parentId } }"
                            class="sw-product-detail-cross-selling__parent-cross-sellings-link"
                        >
                            {{ $tc('sw-product.crossselling.linkCrossSellingsOfParent') }}
                            <mt-icon
                                name="regular-long-arrow-right"
                                size="16px"
                            />
                        </router-link>
                        {% endblock %}
                    </template>

                    <template v-else>
                        {% block sw_product_detail_cross_selling_empty_state_content_child_not_inherited %}
                        <p>{{ $tc('sw-product.crossselling.notInheritedEmptyStateDescription') }}</p>
                        {% endblock %}
                    </template>
                    {% endblock %}
                </template>

                <template v-else>
                    {% block sw_product_detail_cross_selling_empty_state_content_empty %}
                    <p>{{ $tc('sw-product.crossselling.emptyStateDescription') }}</p>
                    {% endblock %}
                </template>
                {% endblock %}

                {% block sw_product_detail_cross_selling_empty_state_inherit_switch %}
                <template v-if="isChild">
                    <div
                        class="sw-product-detail-cross-selling__inherit-toggle-wrapper"
                        :class="{ 'is--inherited': isInherited }"
                    >
                        <mt-switch
                            v-model="isInherited"
                            class="sw-product-detail-cross-selling__inherit-switch"
                            :disabled="!acl.can('product.editor') || !isSystemDefaultLanguage"
                        />

                        <sw-inheritance-switch
                            class="sw-product-detail-cross-selling__inheritance-icon"
                            :is-inherited="isInherited"
                            :disabled="!acl.can('product.editor') || !isSystemDefaultLanguage"
                            @inheritance-restore="restoreInheritance"
                            @inheritance-remove="removeInheritance"
                        />

                        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
                        <label class="sw-product-detail-cross-selling__inheritance-label">
                            {{ $tc('sw-product.crossselling.inheritSwitchLabel') }}
                        </label>
                    </div>
                </template>
                {% endblock %}
            </template>

            {% block sw_product_detail_cross_selling_empty_state_actions %}
            <template #actions>
                {% block sw_product_detail_cross_selling_empty_state_actions_add %}
                <mt-button
                    v-tooltip="{
                        message: onAddCrossSellingTooltipMessage,
                        disabled: acl.can('product.editor') && isSystemDefaultLanguage,
                        showOnDisabledElements: true
                    }"
                    ghost
                    :disabled="isInherited || !acl.can('product.editor') || !isSystemDefaultLanguage"
                    variant="secondary"
                    @click="onAddCrossSelling"
                >
                    {{ $tc('sw-product.crossselling.buttonAddCrossSelling') }}
                </mt-button>
                {% endblock %}
            </template>
            {% endblock %}
        </sw-empty-state>
        {% endblock %}
    </mt-card>
    {% endblock %}

    {% block sw_product_detail_cross_selling_modal_restore_inheritance %}
    <sw-modal
        v-if="showRestoreInheritanceModal"
        variant="small"
        :title="$tc('sw-product.crossselling.restoreInheritanceConfirmTitle')"
        class="sw-product-detail-cross-selling__restore-inheritance-modal"
        @modal-close="onCloseRestoreInheritanceModal"
    >
        {% block sw_product_detail_cross_selling_modal_restore_inheritance_text %}
        <p>
            {{ $tc('sw-product.crossselling.restoreInheritanceConfirmText') }}
        </p>
        {% endblock %}

        {% block sw_product_detail_cross_selling_modal_restore_inheritance_footer %}
        <template #modal-footer>
            {% block sw_product_detail_cross_selling_modal_restore_inheritance_action_cancel %}
            <mt-button
                size="small"
                variant="secondary"
                @click="onCloseRestoreInheritanceModal"
            >
                {{ $tc('global.default.cancel') }}
            </mt-button>
            {% endblock %}

            {% block sw_product_detail_cross_selling_modal_restore_inheritance_action_restore %}
            <mt-button
                class="sw-product-detail-cross-selling__restore-button"
                size="small"
                variant="critical"
                @click="onConfirmRestoreInheritance"
            >
                {{ $tc('sw-product.crossselling.restoreInheritanceButtonRestore') }}
            </mt-button>
            {% endblock %}
        </template>
        {% endblock %}
    </sw-modal>
    {% endblock %}
</div>
{% endblock %}
